<template>
  <div>
    <div class="index myindex">
      <!-- 轮播图 -->
      <!-- Swiper -->
      <div class="swiper-container backgroundfff">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(value, index) in blocks"
            :key="index"
          >
            <div class="iq-blog-box">
              <h5 class="blog-title">Block {{ value.block.index }}</h5>
              <div class="boxline">
                <ul>
                  <li>区块高度:{{ value.block.index }}</li>
                  <li>Hash:{{ value.hash }}</li>
                  <li>Time_Stamp:{{ value.block.timestamp }}</li>
                  <li>Block_Key:5645487</li>
                </ul>
              </div>
              <div v-if="value.block.carbonInfo.blockType == 1">
                <ul>
                  <li>区块类型:记录功率</li>
                  <li>From:{{ value.block.carbonInfo.i }}</li>
                  <li>To:{{ value.block.carbonInfo.previous }}</li>
                  <li>功率:{{ value.block.carbonInfo.p }}</li>
                </ul>
              </div>
              <div v-else-if="value.block.carbonInfo.blockType == 2">
                <ul>
                  <li>区块类型:记录碳势</li>
                  <li>节点编号:{{ value.block.carbonInfo.i }}</li>
                  <li>节点碳势:{{ value.block.carbonInfo.e }}</li>
                </ul>
              </div>
              <div v-else-if="value.block.carbonInfo.blockType == 3">
                <ul>
                  <li>区块类型:记录碳流</li>
                  <li>From:{{ value.block.carbonInfo.i }}</li>
                  <li>To:{{ value.block.carbonInfo.previous }}</li>
                  <li>碳流:{{ value.block.carbonInfo.flow }}</li>
                </ul>
              </div>
            </div>
            <div class="blockline"></div>
          </div>
        </div>

        <!-- Add Pagination -->
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入swiper插件的js
import { getLast10Blocks } from "@/api/qukuailian";
import Swiper from "swiper";
export default {
  name: "index",
  data() {
    return {
      blocks: undefined,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.myswiper();
    });
    getLast10Blocks().then((res) => {
      this.blocks = res.data.chain;
      console.log(this.blocks);
    });
  },
  methods: {
    myswiper() {
      var swiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoHeight: "true", //开启自适应高度,容器高度由slide高度决定
        //分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //分页器按钮可点击
        },
        slidesPerView: 5,
      });
    },
  },
};
</script>
<style>
</style>